<template>
  <div class="problemNotice bg-f2">
    <div class="bg-f2 bg-fff">
      <el-row :gutter="24">
        <!-- 短信 -->
        <el-col :span="12">
          <div class="eachItem">
            发送方式：
            <el-checkbox v-model="noteChecked">短信</el-checkbox>
          </div>
          <div class="eachItem">
            接收人员：
            <el-select v-model="receiveVal" multiple collapse-tags placeholder="请选择">
              <el-option v-for="item in noteReceive" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div style="display: flex; margin: 15px 0">
            短信预览：
            <div class="preview">
              <div class="content">问题通知</div>
            </div>
          </div>
        </el-col>
        <!-- APP -->
        <el-col :span="12">
          <div class="eachItem">
            发送方式：
            <el-checkbox v-model="AppChecked" disabled>APP</el-checkbox>
          </div>
          <div class="eachItem">
            接收人员：
            <el-select placeholder="请选择" disabled v-model="AppReceive">
              <!-- v-model="value" -->
              <el-option v-for="item in AppReceive" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div style="display: flex; margin: 15px 0">
            APP预览：
            <div class="preview previewOther">
              <div class="content" style="background: #ffffff">
                <div class="contentOne">
                  <span> <img src="../../../assets/images/AcOn.png" />守望者 </span>
                  <span style="color: #7f7f7f">5分钟前</span>
                </div>
                <div class="contentTwo">问题通知</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 15px; padding-bottom: 15px">
        <!-- 邮件 -->
        <el-col :span="12">
          <div class="eachItem">
            发送方式：
            <el-checkbox v-model="emailChecked">邮件</el-checkbox>
          </div>
          <div class="eachItem">
            接收人员：
            <el-select v-model="emailVal" placeholder="请选择">
              <el-option v-for="item in emailReceive" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-tooltip class="item" effect="dark" content="无邮箱的接收人员不在下拉选项框内。" placement="top-start">
              <i class="el-icon-question" style="font-size: 15px; color: #bbb; padding-left: 10px"></i>
            </el-tooltip>
          </div>
          <div style="display: flex; margin: 15px 0">
            邮件预览：
            <!-- <div  v-model="emailPreview">11111</div> -->
            <el-input :autosize="{ minRows: 2, maxRows: 5 }" type="textarea" v-model="emailPreview" style="width: 70%"></el-input>
          </div>
        </el-col>
        <!-- 声光 -->
        <el-col :span="12">
          <div class="eachItem eachItemOther">
            发送方式：
            <el-checkbox v-model="acoustoOpticChecked" disabled>声光</el-checkbox>
          </div>
          <div class style="display: flex">
            声音文件：
            <!-- class="upload-demo" -->
            <el-upload disabled drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
            </el-upload>
          </div>
          <div class="eachItem eachItemOther">
            重复播放：
            <el-radio v-model="radio" label="1" disabled>不重复播放</el-radio>
            <el-radio v-model="radio" label="2" disabled>
              重复播放
              <el-input disabled width="96px" style="height: 32px"></el-input>次
            </el-radio>

            <el-radio v-model="radio" label="2" disabled>循环播放</el-radio>
          </div>
          <div>
            <el-button type="primary" class="btnSizeStyle">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
// import { endLoading } from '@/utils/loading.js'
export default {
  data: function () {
    return {
      noteChecked: false,
      currentPage: 1,
      // 联级选择器
      noteReceive: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      receiveVal: [],
      selectArea: '',
      // 上传文件
      fileList: [],
      radio: '1',
      AppChecked: false,
      AppReceive: [],
      emailChecked: false,
      emailReceive: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      emailVal: '',
      emailPreview: '问题通知，IP地址为<设备IP>的<设备名称>，已产生<问题内容>，问题类型<问题类型>，初次问题产生时间<问题产生时间>。',
      acoustoOpticChecked: false,
    }
  },
  created() {
    // endLoading()
  },
}
</script>
<style lang="scss" scoped>
.problemNotice {
  padding-top: 15px;
  padding-bottom: 20px;
  .el-row {
    border-bottom: solid 1px #eaeaea;
    &:last-child {
      border-bottom: 0;
    }
  }
  .el-col .eachItem {
    height: 40px;
    line-height: 40px;
    .el-input {
      width: 84px;
      margin-right: 5px;
    }
  }
  .el-col .eachItemOther {
    height: 55px;
  }
  .el-col .preview {
    position: relative;
    width: 199px;
    height: 365px;
    background: url(../../../assets/images/faultNotice.png) no-repeat;
    background-size: contain;
    margin-left: 5px;
    .content {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 150px;
      height: 90px;
      background: rgba(242, 242, 242, 1);
      border-radius: 10px;
      padding: 10px;
      .contentOne {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
          vertical-align: middle;
        }
      }
    }
  }
  .el-col .previewOther {
    background: url(../../../assets/images/faultNotice1.png) no-repeat;
    background-size: contain;
  }
  .emailPreview {
    width: 270px;
    height: 110px;
    border: solid 1px #eaeaea;
    padding: 15px;
    margin-left: 4px;
  }
}
::v-deep .eachItemOther .el-input__inner {
  height: 32px;
}
</style>
